<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="18">
                <div>
                    <div class="panel">
                        <p class="item_title">需求描述</p>
                        <div class="padding_16 minh_300 rich_text">
                            <p v-html="infoData.p_content"></p>
                        </div>
                        <p class="item_title">附件</p>
                        <div class="padding_16 minh_50">
                            <div v-for="(item,index) in infoData.p_enclosure_name" :key="index">
                                <span style="display: inline-block;line-height: 30px;color: #2093ff;cursor: pointer;" @click="downloadFile(item.f_id,item.f_old_name,item.f_file_type)">{{item.f_old_name}}.{{item.f_file_type}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="panel mt_large">
                        <p class="item_title">技能要求</p>
                        <div class="padding_16">
                            <el-tag class="zb_tags" color="#fff" v-for="(item,index) in jnArr" :key="index">{{item}}</el-tag>
                        </div>
                    </div>
                    <div class="panel mt_large">
                        <p class="item_title">岗位要求</p>
                        <div class="padding_16">
                            <el-tag class="zb_tags" color="#fff" v-for="(item,index) in workArr" :key="index">{{item}}</el-tag>
                        </div>
                    </div>
                    <div class="panel mt_large" style="margin-bottom: 60px;">
                        <p class="item_title">联系信息</p>
                        <div class="padding_16">
                            <div class="contact_panel">
                                <div class="contact_panel_tr">
                                    <p class="contact_panel_th">姓名</p>
                                    <p class="contact_panel_th">电话</p>
                                    <p class="contact_panel_th">邮箱</p>
                                </div>
                                <div class="contact_panel_tr">
                                    <p class="contact_panel_td">{{infoData.p_contacts_name}}</p>
                                    <p class="contact_panel_td">{{infoData.p_contacts_phone}}</p>
                                    <p class="contact_panel_td">{{infoData.p_contacts_email}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="panel border_top_blue">
                    <p class="item_title title_41">发布流程</p>
                    <div class="padding_16 crowd_width">
                        <el-steps direction="vertical" :space="60" :active="2">
                            <el-step v-for="(item,index) in stepData" :key="index" :title="item"></el-step>
                        </el-steps>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>

    import '../../../assets/css/projects.css'
    import axios from 'axios';
    export default {
        data(){
            return{
                stepData: ['发布需求','筛选合适的接包方','签订电子合同、进入实施','验收完成'],
                infoData: {},
                workArr: [],
                jnArr: [],
            }
        },
        methods: {
            init(){

                var _this = this;
                this.$httpGet('/api/index/Project/projectDetail',{'p_id': this.$route.query.pid,'p_uid': window.localStorage.uid}).then(response => {

                    if(response.code == 200){

                        _this.infoData = response.msg;
                        _this.infoData.p_content = _this.escapeStringHTML(response.msg.p_content);
                        if(response.msg.p_job_demand_name){
                            _this.workArr = response.msg.p_job_demand_name.split(',');
                        }else{
                            _this.workArr = [];
                        }
                        if(response.msg.p_skills_name){
                            _this.jnArr = response.msg.p_skills_name.split(',');
                        }else{
                            _this.jnArr = [];
                        }
                        
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //下载附件
            downloadFile(fid,f_old_name,f_file_type){
                var _this = this;

                axios({
                    method: 'get',
                    url: '/api/index/Project/download',
                    params: {
                        'f_id': fid,
                    },
                    responseType: 'arraybuffer',

                })
                .then(function (response) {

                    _this.download(response.data,f_old_name,f_file_type);

                })
                .catch(function (error) {
                    alert(error.response.data.msg);
                });
            },
            // 下载文件
            download (data,f_old_name,f_file_type) {
                if (!data) {
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data]));
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', f_old_name +'.'+f_file_type);

                document.body.appendChild(link);
                link.click();
            },
            //解析编辑器内容
            escapeStringHTML(str) {
                str = str.replace(/&amp;/g,'&');
                str = str.replace(/&lt;/g,'<');
                str = str.replace(/&gt;/g,'>');
                str = str.replace(/&quot;/g,'"');
                return str;
            },
        },
        mounted(){
            this.init();
        },
    }
</script>